<template>
	<div class="info-box">
		<div class="info-line" v-if="!field.data1 && !field.data2 && !field.data3 && !field.data4 && !field.data5 && !field.data6 && !field.data7 
		&& !prefix.data1 && !prefix.data2 && !prefix.data3 && !prefix.data4 && !prefix.data5 && !prefix.data6 && !prefix.data7">
			<div style="width: 100%;text-align: center;color: #FF0000;">数据模型</div>
		</div>
		<div class="info-line" v-if="field.data1 || field.data2 || field.data3 || prefix.data1 || prefix.data2 || prefix.data3">
			<div>
				<span class="info-cate" v-if="field.data1 || prefix.data1">{{prefix.data1 && prefix.data1}}{{field.data1 && '字段①'}}</span>
				<span class="info-title" v-if="field.data2 || prefix.data2">{{prefix.data2 && prefix.data2}}{{field.data2 && '字段②'}}</span>
			</div>
			<div class="info-hits" v-if="field.data3 || prefix.data3">{{prefix.data3 && prefix.data3}}{{field.data3 && '字段③'}}</div>
		</div>
		<div class="info-desc" v-if="field.data4 || prefix.data4">{{prefix.data4 && prefix.data4}}{{field.data4 && '字段④'}}</div>
		<div class="info-line" v-if="field.data5 || prefix.data5 || field.data6 || prefix.data6">
			<div>
				<span class="info-price" v-if="field.data5 || prefix.data5">{{prefix.data5 && prefix.data5}}{{field.data5 && '字段⑤'}}</span>
			</div>
			<div>
				<span class="info-sale" v-if="field.data6 || prefix.data6">{{prefix.data6 && prefix.data6}}{{field.data6 && '字段⑥'}}</span>
			</div>
		</div>
		<div class="info-status" v-if="field.data7 || prefix.data7">{{prefix.data7 && prefix.data7}}{{field.data7 && '字段⑦'}}</div>
		<div v-if="extend">
			<div class="extend-line extend-bg">
				<div class="extend-label">扩展表单</div>
				<div class="extend-item">扩展内容</div>
			</div>
			<div class="extend-line">
				<div class="extend-label">扩展表单</div>
				<div class="extend-item"><Radio :datas="[{name:'单选1',id:'a1'},{name:'单选2',id:'a2'}]" :disabled="true"></Radio></div>
			</div>
			<div class="extend-line extend-bg">
				<div class="extend-label">扩展表单</div>
				<div class="extend-item"><Checkbox :datas="[{name:'多选1',id:'a1'},{name:'多选2',id:'a2'}]" disabled></Checkbox></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		extend: {
			type : Boolean,
			default : true
		},
		field: {
			type : Object,
			default : Object
		},
		prefix: {
			type : Object,
			default : Object
		}
	},
	data() {
		return {
		}
	},
	mounted() {
	},
	methods: {
		
	}
}
</script>

<style lang='less'>
	.info-box{
		position: relative;
		text-align: left;
		background-color:#fff;
		.info-title{
			width: 100%;
			font-weight: bold;
			font-size: 18px;
			overflow: hidden;
			text-overflow: ellipsis;
			box-orient: vertical;
			color: #333;
		}
		.info-line{
			padding: 0 10px;
			color: #999;
			display: flex;
			justify-content:space-between;
			align-items: center;
			line-height: 30px;
			height: 30px;
		}
		.info-cate{
			margin-right:5px;
			padding: 0 8px;
			background-color: red;
			height: 20px;
			line-height: 20px;
			background-image: linear-gradient(to right,#9B30FF 0%,#FF00FF 100%);
			font-size: 11px;
			color: #fff;
			border-radius: 10px 1px 10px 1px;
			white-space:nowrap;
		}
		.info-desc{
			width: 100%;
			line-height: 20px;
			font-size: 12px;
			color: #888;
			overflow: hidden;
			-webkit-line-clamp:2;
			text-overflow: ellipsis;
			box-orient: vertical;
		}
		.info-sale{
			text-align: right;
			font-size: 12px;
			color: #888;
		}
		.info-price{
			font-weight: bold;
			font-size: 18px;
			color: @primary-color;
		}
		.info-money{
			text-decoration:line-through;
			margin-left: 10px;
			font-size: 12px;
			color: #888;
		}
		.info-hits{
			min-width: 50px;
			font-weight: normal;
			float: right;
			font-size: 12px;
			color: #888;
		}
		.info-status{
			position:absolute;
			top: 10px;
			right: 10px;
			border: solid 5px red;
			border-radius: 10px;
			color: red;
			font-size: 40px;
			font-weight: bold;
			line-height: 1;
			padding: 2px 10px;
			opacity: 0.5;
			transform: rotate(-10deg);
		}
		.extend-line{
			background-color:#fff;
			display: flex;
			padding: 2px;
			justify-content:space-between;
			align-items: center;
			border-bottom: 1px solid #eeeeee;
			&.extend-bg{
				background-color:#ebfff4;
			}
		}
		.extend-label{
			padding-left: 5px;
			width: 65px;
			color: #666666;
		}
		.extend-item{
			width: calc(100% - 65px);
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			word-break:break-all;
			white-space: pre-wrap;
			overflow: hidden;
			text-align: center;
		}
	}
</style>